<template>
  <a-drawer
    width="85%"
    placement="right"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
    class="form-drawer"
  >
    <div slot="title">
      <a-descriptions title="投资回报明细" layout="vertical" bordered size="middle">
        <a-descriptions-item label="投资项目">
          {{ info.projectName }}({{ info.projectCode }})
        </a-descriptions-item>
        <a-descriptions-item label="投资店铺" >
          <div>{{ info.brandName }}({{ info.brandCode }})</div>
          <div>{{ info.storeName }}({{ info.storeCode }})</div>
        </a-descriptions-item>
        <a-descriptions-item label="履约时间">
          {{ info.performanceStartTime + '~' + info.performanceEndTime }}
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <a-row :gutter="24">
      <a-col :span="8">
        <a-card>
          <a-statistic title="出资金额(元)" :value="info.investAmount" prefix="￥" />
          <div class="statistic-tip">资方出资金额</div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card>
          <a-statistic title="分账到账金额(元)" :value="info.divideSuccessAmount" prefix="￥" />
          <div class="statistic-tip">分账银行已划账成功金额</div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card>
          <a-statistic title="投资回报率(%)" :value="info.investmentRate" suffix="%" />
          <div class="statistic-tip">分账到账金额/出资金额*100%</div>
        </a-card>
      </a-col>
    </a-row>
    <a-card :bordered="false" class="search-wrapper">
      <div class="search-box">
        <a-tabs :style="{ height: '50px' }" @tabClick="typeClick">
          <a-tab-pane v-for="(item, index) in tabList" :key="index" :tab="item.name"></a-tab-pane>
        </a-tabs>
      </div>
      <div class="search-form-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item>
                <a-range-picker
                  :placeholder="['交易开始日期', '交易结束日期']"
                  valueFormat="YYYY-MM-DD"
                  style="width: 100%"
                  v-model="filter._dateRange"
                  @change="onChange"
                />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="handle">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => (filter = {})">重置</a-button>
                <a-button size="small" @click="download">
                  {{ tabsIndex == 0 ? '导出分账汇总' : '导出分账明细' }}
                </a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>

    <a-card :bordered="false" class="table-wrapper">
      <a-table
        :loading="tableLoading"
        bordered
        :columns="tabsIndex == 0 ? storeColumns : detailColumns"
        :pagination="pagination"
        :data-source="tableData || []"
        @change="(e) => handle(e)"
        :scroll="{ y: tableHeight }"
      >
        <span slot="brandCode" slot-scope="text, record">
          {{ text }}（{{ record.brandCode }}）
        </span>
        <span slot="storeCode" slot-scope="text, record">
          {{ text }}（{{ record.storeCode }}）
        </span>
      </a-table>
    </a-card>
    <go-task ref="goTask" @close="onClose"></go-task>
  </a-drawer>
</template>

<script>
import { divideAccountDetail, divideStoreCollectList, divideStoreDetailList } from '@/api/capital'
import { downloadRequire, divideCollectExport, divideDetailExport } from '@/api/excel'
import { digitSymbolFormat } from '@/utils/index'
import moment from 'moment'
import GoTask from '@/components/goTask.vue'
const storeColumns = [
  { title: '分账品牌', dataIndex: 'brandName', scopedSlots: { customRender: 'brandCode' } },
  {
    title: '分账店铺',
    dataIndex: 'storeName',
    scopedSlots: { customRender: 'storeCode' }
  },
  {
    title: '累计营业收入（元）',
    dataIndex: 'incomeAmount',
    customRender: (text) => digitSymbolFormat(text)
  },
  {
    title: '分账比例(万分之)',
    dataIndex: 'divideRadio',
  },
  {
    title: '分账金额(元)',
    dataIndex: 'divideAmount',
    customRender: (text) => digitSymbolFormat(text)
  },
  {
    title: '分账到账金额(元)',
    dataIndex: 'divideSuccessAmount',
    customRender: (text) => digitSymbolFormat(text)
  },
  {
    title: '分账在途金额(元)',
    dataIndex: 'divideRouteAmount',
    customRender: (text) => digitSymbolFormat(text)
  }
]
const detailColumns = [
  { title: '分账时间', dataIndex: 'createTime' },
  {
    title: '分账比例(万分之)',
    dataIndex: 'divideRadio',
  },
  {
    title: '分账金额(元)',
    dataIndex: 'divideAmount',
    customRender: (text) => digitSymbolFormat(text)
  },
  { title: '划账状态', dataIndex: 'remitStatusDesc' },
  { title: '分账品牌', dataIndex: 'brandName', scopedSlots: { customRender: 'brandCode' } },
  { title: '分账店铺', dataIndex: 'storeName', scopedSlots: { customRender: 'storeCode' } },
  {
    title: '营业收入(元)',
    dataIndex: 'incomeAmount',
    customRender: (text) => digitSymbolFormat(text)
  },
  { title: '交易日期', dataIndex: 'transDate' }
]
export default {
  name: 'InvestDetail',
  data() {
    return {
      visible: false,
      info: {},
      tabList: [
        { name: '店铺汇总', value: 0, excelRequest: divideCollectExport },
        { name: '分账明细', value: 1, excelRequest: divideDetailExport }
      ],
      tabsIndex: 0,
      tableLoading: false,
      pagination: {
        current: 1,
        'show-size-changer': true,
        total: 0
      },
      tableData: [],
      storeSource: [],
      detailSource: [],
      storeColumns,
      detailColumns,
      filter: {
        _dateRange: [],
        transBeginDate: '',
        transEndDate: ''
      }
    }
  },
  computed: {
    tableHeight() {
      return document.body.clientHeight - this.tabbarHeight
    }
  },
  methods: {
    download() {
      const requestUrl = this.tabList[this.tabsIndex].excelRequest
      downloadRequire(requestUrl, this.filter).then((resp) => {
        this.$refs.goTask.show(resp.data)
      })
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          capitalSetAccount(this.form).then((resp) => {
            this.submitLoading = false
            this.$notification['success']({
              message: '提示',
              description: '资方设置成功'
            })
            this.onClose()
            this.$emit('on-submit')
          })
        }
      })
    },
    typeClick(index) {
      if (this.tabsIndex != index) {
        this.tabsIndex = index
        this.handle()
      }
    },
    afterVisibleChange(visible) {
      if (!visible) {
        this.form = {
          receivablesAccount: ''
        }
      }
    },
    onChange(val) {
      let [transBeginDate, transEndDate] = val
      this.filter.transBeginDate = transBeginDate && moment(transBeginDate).format('YYYY-MM-DD')
      this.filter.transEndDate = transEndDate && moment(transEndDate).format('YYYY-MM-DD')
    },
    onClose() {
      this.visible = false
    },
    open(record) {
      this.info = record
      this.visible = true
      
      this.handle()
    },
    storeCollect() {
      divideStoreCollectList(this.filter)
        .then((res) => {
          this.tableLoading = false
          this.tableData = res.rows
          this.pagination.total = res.total || 0
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    storeDetail() {
      divideStoreDetailList(this.filter)
        .then((res) => {
          this.tableLoading = false
          this.tableData = res.rows
          this.pagination.total = res.total || 0
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    handle(v) {
      if (v && v.current) {
        if (this.filter.pageSize == v.pageSize) {
          this.pagination.current = v.current
          this.filter.pageNum = v.current
        } else {
          this.filter.pageSize = v.pageSize
          this.filter.pageNum = 1
          this.pagination.current = 1
        }
      } else {
        this.filter.pageNum = 1
        this.filter.pageSize = 10
        this.pagination.current = 1
      }
      this.filter.brandCode = this.info.brandCode
      this.filter.storeCode = this.info.storeCode
      this.tableLoading = true
      this.tabsIndex == 0 ? this.storeCollect() : this.storeDetail()
      // divideAccountDetail(this.filter)
      //   .then((res) => {
      //     this.tableLoading = false
      //     this.tableData = res.rows
      //     this.pagination.total = res.total || 0
      //   })
      //   .catch(() => {
      //     this.tableLoading = false
      //   })
    }
  },
  components: { GoTask }
}
</script>

<style lang="less" scoped>
.statistic-tip {
  padding-top: 20px;
  border-top: 1px solid #eeeeee;
  margin-top: 35px;
  font-size: 14px;
}
</style>
